<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body {
  margin:0;
}
div {
  height:100px;
  width:100px;
}
.box1 {
  background-color:blue;
  position:relative;
  top:0px;
  left:0px;
}
.box2 {
  background-color:red;
  position:relative;
  top:-50px;
  left:50px;
}
.box3 {
  background-color:yellow;
  position:relative;
  top:-100px;
  left:100px;
}
.box4 {
  background-color:green;
  position:relative;
  top:-150px;
  left:150px;
}
.box5 {
  background-color:black;
  position:relative;
  top:-200px;
  left:200px;
}
</style>
</head>
<div class="box1"></div>
  <div class="box2"> </div>
    <div class="box3"> </div>
      <div class="box4"></div>
        <div class="box5"></div>
      
   
 

<body>
</body>
</html>
